import React from 'react';
import {
    Buttonm,
    Navbar,
    Nav,
    Dropdown,
    Icon,
    Sidebar,
    Sidenav,
    Header,
    Content,
    Container,
    Breadcrumb,
    Table
} from 'rsuite';

const instance = (
    <Breadcrumb>
        <Breadcrumb.Item>用户信息</Breadcrumb.Item>
        <Breadcrumb.Item active>用户列表</Breadcrumb.Item>
    </Breadcrumb>
);


const total = 20;
const fakeLargeData = [
    { id: 1, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
    { id: 2, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
    { id: 3, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
    { id: 4, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
    { id: 5, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
    { id: 6, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
    { id: 7, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
    { id: 8, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
    { id: 9, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
    { id: 10, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' }
    // { id: 11, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
    // { id: 12, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' }
];


class User extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            displayLength: 10,
            loading: false,
            page: 1
        };
        this.handleChangePage = this.handleChangePage.bind(this);
        this.handleChangeLength = this.handleChangeLength.bind(this);
        this.hanldeGetUserList = this.hanldeGetUserList.bind(this);
    }

    handleChangePage(dataKey) {
        // alert("handleChangePage:"+dataKey);
        this.setState({
            page: dataKey
        });
    }
    handleChangeLength(dataKey) {
        // alert("handleChangeLength:"+dataKey);
        this.setState({
            page: 1,
            displayLength: dataKey
        });
    }

    hanldeGetUserList(){
        // alert("请求数据");
        //TODO:去后台获取数据并返回json数组
        const r = parseInt(Math.random()*2);
        // alert(r);

        if(r==0){
            const fakeLargeData = [
                { id: 1, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 2, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 3, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 4, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 5, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 6, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 7, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 8, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 9, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 10, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' }
            ];
            return fakeLargeData;
        }else{
            const fakeLargeData = [
                { id: 11, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 12, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 13, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 14, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 15, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 16, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 17, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 18, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 19, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' },
                { id: 20, firstName: 'a', lastName: 'a@email.com', city: '...', street: 'adad', companyName: 'ada' }
            ];
            return fakeLargeData;
        }
    }

    getData() {

        const data = this.hanldeGetUserList();

        const { displayLength, page } = this.state;

        return data;

        // return data.filter((v, i) => {
        //     const start = displayLength * (page - 1);
        //     const end = start + displayLength;
        //     return i >= start && i < end;
        // });
    }

    render() {
        const data = this.getData();
        const { loading, displayLength, page } = this.state;

        return (
            <div style={{ padding: '10px' }}>
                <Header>
                    {instance}
                </Header>
                <Content>

                    


                    <Table
                        virtualized
                        height={400}
                        // data={fakeLargeData}
                        onRowClick={data => {
                            console.log(data);
                        }}

                        data={data} loading={loading}
                    >
                        <Table.Column width={70} align="center" fixed>
                            <Table.HeaderCell>Id</Table.HeaderCell>
                            <Table.Cell dataKey="id" />
                        </Table.Column>

                        <Table.Column width={130}>
                            <Table.HeaderCell>First Name</Table.HeaderCell>
                            <Table.Cell dataKey="firstName" />
                        </Table.Column>

                        <Table.Column width={130}>
                            <Table.HeaderCell>Last Name</Table.HeaderCell>
                            <Table.Cell dataKey="lastName" />
                        </Table.Column>

                        <Table.Column width={200}>
                            <Table.HeaderCell>City</Table.HeaderCell>
                            <Table.Cell dataKey="city" />
                        </Table.Column>

                        <Table.Column width={200}>
                            <Table.HeaderCell>Street</Table.HeaderCell>
                            <Table.Cell dataKey="street" />
                        </Table.Column>

                        <Table.Column width={200}>
                            <Table.HeaderCell>Company Name</Table.HeaderCell>
                            <Table.Cell dataKey="companyName" />
                        </Table.Column>
                    </Table>
                    <Table.Pagination
                        lengthMenu={[
                            {
                                value: 10,
                                label: 10
                            },
                            {
                                value: 20,
                                label: 20
                            }
                        ]}
                        activePage={page}
                        displayLength={displayLength}
                        total={total}
                        onChangePage={this.handleChangePage}
                        onChangeLength={this.handleChangeLength}
                    />
                </Content>
            </div>
        );
    }

}

export default User;